<script lang="ts" setup>
import { ref } from 'vue'
import { DIVIDER_STYLE, LIST, MAP_OPTIONS, RANGE_OPTIONS, RTK_OPTIONS } from './data'
import Bus from '@/utils/bus'

const props = defineProps({
  mapRef: {
    type: Object,
    default: () => {},
  },
  recordData: {
    type: Object,
    default: () => ({}),
  },
  selRecord: {
    type: Object,
    default: () => ([]),
  },
})

const emits = defineEmits([])

const list = ref(LIST)
const typePicker = ref(false)
const rtkPicker = ref(false)
const rangePicker = ref(false)
const polygonPicker = ref(false)
const submitDialog = ref(false)
const polygonList = ref([])

function onClick(item) {
  // 初始化状态并解绑事件监听器
  props.mapRef.closeClickPipe()
  props.mapRef.offClickMarker()
  props.mapRef.cancelDrawPolygon()
  props.mapRef.cancelDrawPolygonRange()

  list.value = list.value.map(i => ({
    ...i,
    active: item.id === i.id ? !i.active : false,
  }))

  if (item.id === 1) {
    typePicker.value = true
  }

  if (item.id === 2) {
    if (item.active) {
      Bus.$emit('showLayerControl', true)
      props.mapRef.closeClickPipe()
    }
    else {
      Bus.$emit('showLayerControl', false)
      props.mapRef.openClickPipe()
    }
  }
  else {
    Bus.$emit('showLayerControl', true)
  }

  if (item.id === 3) {
    rtkPicker.value = true
  }

  if (item.id === 4) {
    props.mapRef.onClickMarker()
  }
  else {
    // submitDialog.value = true
  }

  if (item.id === 5) {
    rangePicker.value = true
  }

  if (item.id === 6) {
    props.mapRef.locateCurrentPosition()
  }
}

function onChangeMapType(type): void {
  typePicker.value = false
  props.mapRef.changeMapType(type)
}

function onRtkScan(type) {
  uni.postMessage({
    data: {
      action: 'scanRtk',
      type,
    },
  })
  rtkPicker.value = false
}

window.handleScanResult = (res) => {
  console.log('webview===>扫描结果', JSON.stringify(res))
}

function onRangeDraw(type) {
  rangePicker.value = false
  // 排水户弹窗
  polygonPicker.value = true
  if (type === 0) {
    // 绘制排查范围
    polygonList.value = []
    polygonPicker.value = false
    console.log(props.selRecord, 'selRecord123')

    props.mapRef.openDrawPolygonRange({ selectPolygon: props.selRecord })
  }
  else if (type === 1) {
    polygonList.value = props.recordData.firstAreas
  }
  else if (type === 2) {
    polygonList.value = props.recordData.secondAreas
  }
}

function onPolygonSelect(option) {
  console.log(option, '选择的排水户信息')
  polygonPicker.value = false
  Bus.$emit('showPromot', { show: true, submit: true, drawPolygon: true })
  props.mapRef.openDrawPolygon({ selectPolygon: option })
}

function addEvent() {
  Bus.$on('refreshTool', (value) => {
    list.value = list.value.map(i => ({
      ...i,
      active: false,
    }))
  })
}

onMounted(() => {
  addEvent()
})
</script>

<template>
  <div class="tools">
    <div
      v-for="item in list"
      :key="item.id"
      class="tools-item"
      @click="onClick(item)"
    >
      <div
        class="tools-item__image"
        :style="{
          backgroundImage: `url(${item.active ? item.image1 : item.image2})`,
          backgroundSize: 'cover',
        }"
      />
      <div
        class="tools-item__title"
        :class="{ 'tools-item__title--active': item.active }"
      >
        {{ item.name }}
      </div>
    </div>
  </div>

  <!-- 地图类型选择器 -->
  <van-popup
    v-model:show="typePicker"
    destroy-on-close
    round
    position="bottom"
    class="tools-popup"
  >
    <div class="tools-popup__content">
      <div class="tools-popup__title">
        地图类型
      </div>
      <template v-for="option in MAP_OPTIONS" :key="option.id">
        <van-divider class="w-full" :style="DIVIDER_STYLE.thin" />
        <div
          class="tools-popup__item"
          @click="onChangeMapType(option.type)"
        >
          {{ option.name }}
        </div>
      </template>
      <van-divider class="w-full" :style="DIVIDER_STYLE.thick" />
      <div class="tools-popup__item tools-popup__item--cancel" @click="typePicker = false">
        取消
      </div>
    </div>
  </van-popup>

  <!-- RTK扫描选择器 -->
  <van-popup
    v-model:show="rtkPicker"
    destroy-on-close
    round
    position="bottom"
    class="tools-popup"
  >
    <div class="tools-popup__content">
      <template v-for="(option, index) in RTK_OPTIONS" :key="option.id">
        <template v-if="index > 0">
          <van-divider class="w-full" :style="DIVIDER_STYLE.thin" />
        </template>
        <div
          class="tools-popup__item"
          @click="onRtkScan(option)"
        >
          {{ option.name }}
        </div>
      </template>
      <van-divider class="w-full" :style="DIVIDER_STYLE.thick" />
      <div class="tools-popup__item tools-popup__item--cancel" @click="rtkPicker = false">
        取消
      </div>
    </div>
  </van-popup>

  <!-- 区域绘制 -->
  <van-popup
    v-model:show="rangePicker"
    destroy-on-close
    round
    position="bottom"
    class="tools-popup"
  >
    <div class="tools-popup__content">
      <template v-for="(option, index) in RANGE_OPTIONS" :key="option.id">
        <template v-if="index > 0">
          <van-divider class="w-full" :style="DIVIDER_STYLE.thin" />
        </template>
        <div
          class="tools-popup__item"
          @click="onRangeDraw(option.type)"
        >
          {{ option.name }}
        </div>
      </template>
      <van-divider class="w-full" :style="DIVIDER_STYLE.thick" />
      <div class="tools-popup__item tools-popup__item--cancel" @click="rangePicker = false">
        取消
      </div>
    </div>
  </van-popup>

  <!-- 管线绘制提交 -->
  <van-dialog v-model:show="submitDialog" title="" show-cancel-button>
    <div class="dialog-text">
      是否要提交管线或区域?
    </div>
  </van-dialog>

  <!-- 选择一级、二级排水户 -->
  <van-popup
    v-model:show="polygonPicker"
    class="project-popup"
    destroy-on-close
    round
    position="bottom"
  >
    <div class="project-popup__header">
      <div class="project-popup__title">
        排水户
      </div>
    </div>
    <div class="project-popup__body">
      <div
        v-for="(option, index) in polygonList"
        :key="option.id"
        class="project-popup__item"
        @click="onPolygonSelect(option)"
      >
        {{ option.areaName }}
        <van-divider
          class="project-popup__divider"
          :style="{ borderColor: '#D0D0D2', borderWidth: '0.1px' }"
        />
      </div>
    </div>
  </van-popup>
</template>

<style scoped lang="less">
.tools {
  position: absolute;
  right: 12px;
  top: 170px;

  &-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    margin-top: 10px;
    padding-top: 4px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 1px 0 #c7c8c8;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    &__image {
      width: 19px;
      height: 19px;
    }

    &__title {
      margin-top: 5px;
      font-size: 11px;
      color: #000;
      transition: color 0.3s ease;

      &--active {
        color: #0070bc;
      }
    }
  }
}
.dialog-text {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tools-popup {
  &__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__title {
    font-weight: bold;
    font-size: 20px;
    height: 60px;
    line-height: 60px;
  }

  &__item {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:active {
      background-color: #f5f5f5;
    }

    &--cancel {
      color: #666;
    }
  }
}

.project-popup {
  height: 300px;
  max-height: 300px;
  display: flex;
  flex-direction: column;

  &__header {
    flex-shrink: 0;
    position: relative;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #ebedf0;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -10px;
      height: 10px;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), transparent);
      pointer-events: none;
    }
  }

  &__title {
    font-size: 18px;
    font-weight: 500;
    color: #323233;
    line-height: 56px;
    text-align: center;
  }

  &__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;

    &::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }
  }

  &__item {
    position: relative;
    padding: 14px 0;
    font-size: 16px;
    color: #323233;
    cursor: pointer;
    text-align: center;
    transition: color 0.3s;
    text-align: left;
  }

  &__divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }
}
:deep(.van-divider) {
  margin: 0;

  &::before {
    display: none;
  }
}
</style>
